﻿<!DOCTYPE html>

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			
			a,
			img {
				border: 0;
			}
			html,
			body {
				width: 100%;
				height: 100%;
			}
			/* demo */
			#wrap {
				width: 100%;
				height: 100%;
				background-image: url(img/zhuanpanbeijing.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;
			}
			.demo {
				top: 20%;
				width: 80%;
				height: 45%;
				position: relative;
				margin: 50px auto 0 auto;
			}
			
			#disk {
				width: 100%;
				height: 100%;
				overflow: hidden;
				background: url(img/zhuanpan.png) no-repeat;
				background-size: 100% 100%;
			}
			
			#start {
				width: 20%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 40%;
			}
			
			#start img {
				cursor: pointer;
			}
			
			#startbtn {
				-webkit-transform: rotate(110deg);
			}
			
			#startbtn img {
				width: 50%;
			}
		</style>

		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
		<script type="text/javascript" src="js/jquery.easing.min.js"></script>
		<script type="text/javascript">
//			$(function() {
//				$("#start").rotate({
//					bind: {
//						click: function() {
//							var a = Math.floor(Math.random() * 360);
//							$(this).rotate({
//								duration: 3000,
//								angle: 0,
//								animateTo: 1440 + a,
//								easing: $.easing.easeOutSine,
//								callback: function() {
//									alert('中奖了！' + a);
//
//								}
//							});
//						}
//					}
//				});
//			});

//			<!--需要服务端php运行环境-->
			$(function(){ 
			     $("#start").click(function(){ 
			        lottery(); 
			    }); 
			}); 
			function lottery(){ 
			    $.ajax({ 
			        type: 'POST', 
			        url: 'data.php', 
			        dataType: 'json', 
			        cache: false, 
			        error: function(){ 
			            alert('出错了！'); 
			            return false; 
			        }, 
			        success:function(json){ 
			            $("#start").unbind('click').css("cursor","default"); 
			            var a = json.angle; //角度 
			            var p = json.prize; //奖项 
			            $("#start").rotate({ 
			                duration:3000, //转动时间 
			                angle: 0, 
			                animateTo:1800+a, //转动角度 
			                easing: $.easing.easeOutSine, 
			                callback: function(){ 
			                    var con ="src","img/win"+5+".png"; 
			                    if(con){ 
			                        lottery(); 
			                    }else{ 
			                        return false; 
			                    } 
			                } 
			            }); 
			        } 
			    }); 
			} 
		</script>

	</head>

	<body>
		<div id="wrap">
			<div class="demo">
				<div id="disk"></div>
				<div id="start"><img src="img/xiaocheche.png" id="startbtn"></div>
			</div>
			<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
			</div>
		</div>

	</body>

</html>